<template>
  <div class="search">
      <Row>
          <Col>
            <Card>
                <Row style="margin-bottom: 20px">
                    <Button @click="getList" icon="md-refresh" style="margin-right:10px">刷新</Button>
                </Row>

                <Row>
                    <Table :loading="loading" border :columns="columns" :data="tableData" ref="table" sortable="custom" @on-sort-change="changeSort"></Table>
                </Row>

                <Row type="flex" justify="end" class="page">
                    <Page :current="searchForm.pageNumber" :total="pageTotal" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                </Row>
            </Card>
          </Col>
      </Row>


    <Modal :title="modalTitle" v-model="modalVisable" :mask-closable="false" :width="800">
        <Form ref="checkForm" :model="checkForm" :label-width="100" :rules="checkFormRules">
            <FormItem label="预约处理状态" prop="consent" >
                <Select v-model="checkForm.consent" style="width: 100%">
                    <Option value="1">同意</Option>
                    <Option value="-1">拒绝</Option>
                </Select>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="text" @click="modalVisable=false">取消</Button>
            <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import {getYuYueList, getCategoryList} from '@/api/commodity'
export default {
    data () {
        return {
            submitLoading: false,
            checkVisable: false,
            searchForm: {
                pageNumber: 1,
                pageSize: 10
            },
            checkForm: {
                id: "",
                consent: ""
            },
            checkFormRules: {
                consent: [{ required: true, message: "请选择预约处理状态", trigger: "change" }],
            },
            modalVisable: false,
            modalTitle: '',
            pageTotal: 0,
            tableData: [],
            columns: [
                {
                    type: "index",
                    width: 60,
                    align: "center",
                    fixed: "left"
                },
                {
                    title: '店铺名称',
                    key: 'shopName'
                },
                {
                    title: "用户昵称",
                    key: "nickName",
                },
                {
                    title: '预约时间',
                    key: 'bookingTime'
                },
                {
                    title: '预约状态',
                    key: 'consent',
                    render: (h,params)=> {
                        if (params.row.consent === 0) {
                            return h("span","待审核")
                        } else if (params.row.consent === 1) {
                            return h("span","已同意")
                        } else if (params.row.consent === -1) {
                            return h("span","已拒绝")
                        }
                    }
                },
                {
                    title: '创建时间',
                    key: 'createTime'
                },
                {
                    title: "操作",
                    width: 240,
                    align: "center",
                    fixed: "right",
                    render: (h,params)=> {
                        if (params.row.consent == 0) {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px",
                                        display: (params.row.consent === 0) ? "inline-block" : "none"
                                    },
                                    on: {
                                        click: () => {
                                            this.check(params.row);
                                        }
                                    }
                                    },
                                    "预约处理"
                                ),
                            ])
                        } else {
                            return h("span", "暂无操作")
                        }
                    }
                }
            ],
            category: [],
            loading: true,
            searchForm: {
                classId: [],
                pageNumber: 1,
                pageSize: 10
            },
            addForm: {
                storeId: '', //商家id
                bookingTime: '' //预约时间
            },
            formRules: {
                storeId: [
                    {
                        required: true,
                        message: '请选择商家'
                    }
                ],
                bookingTime: [
                    {
                        required: true,
                        message: '请选择预约时间'
                    }
                ]
            }
        }
    },
    methods: {
        changeSort () {

        },
        // 获取分类列表
        getCategory() {
            getCategoryList().then(res => {
                if (res.success) {
                    res.result.forEach(item => {
                        let obj = {};
                        obj.value = item.id;
                        obj.label = item.title;
                        obj.loading = false;
                        obj.children = [];
                        this.category.push(obj);
                    });
                }
            });
        },
        // 获取列表
        getList () {
            getYuYueList(this.searchForm).then(res => {
                console.log(res)
                this.loading = false
                if(res.success) {
                    this.tableData = res.result.data
                    this.pageTotal = res.result.size
                } else {
                    this.tableData = []
                    this.pageTotal = 0;
                }
            })
        },
        // 搜索子分类
        loadData (item, callback) {
            item.loading = true;
            getCategoryList({
                pid: item.value
            }).then(res => {
                item.loading = false;
                if (res.success) {
                res.result.forEach(value => {
                    let obj = {};
                    obj.value = value.id;
                    obj.label = value.title;
                    item.children.push(obj);
                });
                } else {
                // 最少有一个子分类那就是它自己
                item.children.push({
                    value: item.value,
                    label: item.label
                });
                }
                callback();
            });
        },
        // 搜索
        search () {
            this.getList()
        },
        // 切换页码
        changePage (num) {
            this.searchForm.pageNumber = num
        },
        // 切换每页显示条数
        changePageSize (num) {
            this.searchForm.pageSize = num
        },
        // 编辑显示模态框
        showEditModal (row) {
            this.modalVisable = true
            this.modalTitle = '编辑预约'
        },
        // 删除
        remove (id) {
            this.$Modal.confirm({
                title: "删除",
                content: "确认删除该条数据吗？",
                loading: false,
                onOk: ()=> {
                    removeYuYue({
                        ids: id
                    }).then(res => {
                        if (res.success) {
                            this.$Message.success('操作成功') 
                            this.getList();
                            this.$Modal.remove()
                        }else{
                            this.$Message.error(res.message);
                            this.$Modal.remove()
                        }
                    })
                }
            })
            
        },
        // 取消提交
        cancel () {
            this.modalVisable = false;
        },
        check (v) {
            this.modalTitle = "预约处理";
            this.$refs.checkForm.resetFields();
            this.checkForm.id = v.id;
            this.modalVisable = true;
        },
        // 添加或编辑
        handleSubmit () {
            this.$refs.checkForm.validate(valid=> {
                if (valid) {
                    this.submitLoading = true;
                    this.postRequest("/bookingOrder/checkBookingOrder", this.checkForm).then(res=> {
                        this.submitLoading = false;
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.getList();
                            this.modalVisable = false;
                        } else {
                            this.$Message.error(res.message);
                            this.modalVisable = false;
                        }   
                    })
                }
            })
        }
    },
    created () {
        this.getCategory()
        this.getList()
        
    }
}
</script>

<style>
.yuyue-content{
    padding: 16px;
    background-color: #ffffff;
}
.img{
    width: 50px;
    height: 50px;
}
</style>